<!-- src/views/system/document/index.vue -->
<template>
  <div class="app-container">
    <el-card shadow="never" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>文档管理</span>
        <!-- <el-button style="float: right; margin-top: -5px;" type="primary" @click="handleUpload">
          <i class="el-icon-upload2"></i> 开始上传
        </el-button> -->
       
      <el-upload style="float: right; margin-top: -5px;"
          ref="uploadRef"
          :action="actionUrl"
          :auto-upload="false"
          :http-request="uploadFile"
          :file-list="fileList"
          :on-change="handleFileChange"
          :on-remove="handleRemove"
          :limit="1"
          :on-exceed="onExceed"
          multiple
        >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button size="small" type="success" @click="handleUpload" v-if="hasFileToUpload">开始上传</el-button>
      </el-upload>
          <!-- 使用计算属性显示文件数量 -->
        <p v-if="hasFileToUpload">已选择 {{ uploadFileCount }} 个文件</p>
        
      </div> 
    </el-card>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>文档列表</span>
        <div class="filter-container">
          <el-input v-model="queryParams.fileName" placeholder="请输入文件名" size="small" @keyup.enter.native="handleQuery" style="width: 200px;">
            <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
          </el-input>
        </div>
      </div>
      
      <el-table
        :data="documentList"
        border
        fit
        highlight-current-row
        stripe
        @row-dblclick="handleEdit"
        style="width: 100%; margin-bottom: 15px;">
        <el-table-column label="文件名" prop="docName" min-width="200">
          <template slot-scope="scope">
            <el-link :underline="false" @click="handleEdit(scope.row)">{{ scope.row.docName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="文件大小" prop="fileSize" min-width="100" :formatter="formatFileSize"></el-table-column>
        <el-table-column label="创建者" prop="createBy" min-width="100"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
        <el-table-column label="操作" min-width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
              <i class="el-icon-edit"></i> 编辑
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    
  </div>
</template>

<script>
import { listDocument, uploadDocument, deleteDocument } from '@/api/system/document'
import {formatSize} from '@/utils/format'

export default {
  data() {
    return {
      //el-upload
      actionUrl: "",
      fileList: [],
      hasFileToUpload: false,
      uploadFileCount: 0,
      // 文档列表
      documentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileName: ''
      },
      // 总记录数
      total: 0
    }
  },

  created() {
    this.getDocumentList()
  },

  methods: {
// 获取文档列表
    getDocumentList() {
      listDocument(this.queryParams).then(response => {
        this.documentList = response.rows
        this.total = response.total
      })
    },
    
    // 处理查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getDocumentList()
    },
    
    // 处理每页条数变化
    handleSizeChange(size) {
      this.queryParams.pageSize = size
      this.getDocumentList()
    },
    
    // 处理当前页变化
    handleCurrentChange(page) {
      this.queryParams.pageNum = page
      this.getDocumentList()
    },

    // 处理编辑
    handleEdit(row) {
      this.$router.push({ path: '/system/document/edit/' + row.docId })
    },
    
    // 处理删除
    handleDelete(row) {
      this.$confirm('确定要删除该文档吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return deleteDocument(row.docId)
      }).then(() => {
        this.getDocumentList()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(() => {})
    },
    
    // 用户点击上传调用
    async handleUpload(){

      if (!this.hasFileToUpload) {
        this.$message.error;('没有文件要上传');
        return;
      }
      this.uploading = true;
        // 触发上传 调用配置 :http-request="uploadFile"
        // 即触发 uploadFile函数
        await this.$refs.uploadRef.submit();
        // 上传完成后执行的操作 ...
    },
    
    uploadFile(param){
      let fd = new FormData();
      let file = param.file;
      let flag= true;
      fd.append('file',file);
      //调用上传接口
      uploadDocument(fd).then(res => {
        this.$message.success('上传成功');
      /*上传成功处理*/
      }).catch(err => {
          flag = false;
          this.uploading = false;
        /*报错处理*/
      });
      if (flag==true){
          //手动触发成功回调
          this.handleUploadSuccess();
      }
    },

    // 处理文件选择变化
    handleFileChange(file, fileList) {
      this.fileList = fileList;
      this.uploadFileCount = fileList.length;
      this.hasFileToUpload = fileList.length>0;
    },

    // 处理文件选择变化
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.uploadFileCount = fileList.length;
      this.hasFileToUpload = fileList.length>0;
    },

    onExceed(file, fileList) {
      this.$message.error('只能上传1个文件');
    },

    // 上传成功处理
    handleUploadSuccess() {
      this.uploading = false;
      this.$message.success('文件上传成功');
      this.clearFileSelection();  // 上传成功后清除文件选择
      // this.$emit('uploadSuccess', response);  // 通知父组件上传成功
    },

    // 清除文件选择
    clearFileSelection() {
      this.$refs.uploadRef.clearFiles();
      this.fileList=[];
      this.uploadFileCount = this.fileList.length;
      this.hasFileToUpload = this.fileList.length>0;
    },

    // 格式化文件大小
    formatFileSize(row, column) {
      return formatSize(row.fileSize)
    }
  }
}
</script>